<template>
  <div class="container">
    <div v-if="!dataNone" class="panel panel-box mar-t-10 pad-l-8 pad-r-8">
      <ul>
        <li class="flex v-align-c panel-item" v-for="(item, index) in listData" :key="index"
          @click="goHome(item.memberId)">
          <span class="font-15 mar-r-15 pad-l-6 font-gray" :class="'index-' + (index + 1)">{{ index + 1 }}</span>
          <img v-if="item.avatar" class="userinfo-avatar mar-r-15" :src="item.avatar" mode="cover"/>
          <div class="flex-item font-13">
            <p class="font-14">{{item.nickname}}</p>
            <p class="font-11 font-gray">累计{{text}}{{item.countVisitsNum}}次</p>
          </div>
          <icon class="iconfont icon-arrow-right font-14 arrow-pc"></icon>
        </li>
      </ul>
    </div>
    <div class="pad-t-30 mar-t-30 align-c font-14 font-gray" v-if="dataNone">暂无数据</div>
  </div>
</template>

<script>
  import {
    pagingMemberReport
  } from '@/api/personal'

  export default {
    data() {
      return {
        listData: [],
        dataNone: false,
        listQuery: {
          currentPage: 1,
          size: 15
        },
        pullLoad: {
          loading: false,
          finished: false
        },
        text: ''
      }
    },
    onShow() {
      this.listQuery = {
        currentPage: 1,
        size: 15
      }
      let type = this.getCurrentPage().query.type
      let title = ''
      // 累计客户数 1, 新增客户数 2, 活跃客户数 3, 名片访问量 4, 名片转发量 5,
      // 微店访问量 6, 商品转发量 7, 资讯访问量 8, 文章转发量 9
      // reportType   searchType businessType
      if (type === '1') {
        title = '累计客户数'
        this.listQuery.reportType = 2
        this.listQuery.searchType = 1
        this.text = '访问'
      } else if (type === '2') {
        title = '新增客户数'
        this.listQuery.reportType = 2
        this.listQuery.searchType = 2
        this.text = '访问'
      } else if (type === '3') {
        title = '活跃客户数'
        this.listQuery.reportType = 2
        this.listQuery.searchType = 3
        this.text = '访问'
      } else if (type === '4') {
        title = '主页访问量'
        this.listQuery.reportType = 2
        this.listQuery.searchType = 1
        this.listQuery.businessType = 1
        this.text = '访问'
      } else if (type === '5') {
        title = '主页转发量'
        this.listQuery.reportType = 1
        this.listQuery.searchType = 1
        this.listQuery.businessType = 1
        this.text = '转发'
      } else if (type === '6') {
        title = '微店访问量'
        this.listQuery.reportType = 2
        this.listQuery.searchType = 1
        this.listQuery.businessType = 2
        this.text = '访问'
      } else if (type === '7') {
        title = '商品转发量'
        this.listQuery.reportType = 1
        this.listQuery.searchType = 1
        this.listQuery.businessType = 2
        this.text = '转发'
      } else if (type === '8') {
        title = '资讯访问量'
        this.listQuery.reportType = 2
        this.listQuery.searchType = 1
        this.listQuery.businessType = 3
        this.text = '访问'
      } else if (type === '9') {
        title = '文章转发量'
        this.listQuery.reportType = 1
        this.listQuery.searchType = 1
        this.listQuery.businessType = 3
        this.text = '转发'
      }
      this.$pt.setNavigationBarTitle({
        title: title + '统计'
      })
      this.listData = []
      this.listQuery.currentPage = 1
      this.pullLoad.finished = false
      this.pagingMemberReport()
    },
    onReachBottom() {
      if (!this.pullLoad.finished) {
        this.$utils.showToast({
          title: '数据加载中',
          icon: 'loading'
        })
        this.pagingMemberReport()
      }
    },
    methods: {
      goHome(memberId) {
        this.$utils.setMyId(memberId)
        this.$root.$mp.appOptions.query = {}
        this.$pt.reLaunch({ url: '/pages/home/main' })
        // this.$pt.reLaunch({ url: '/pages/home/main?memberId=' + item.memberId })
      },
      pagingMemberReport() {
        this.$utils.showToast({
          title: '数据加载中',
          icon: 'loading'
        })
        this.listQuery.memberId = this.getCustomerId
        pagingMemberReport(this.listQuery).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          this.dataNone = false
          this.listData = this.listData.concat(response.data.records)
          if (this.listQuery.currentPage === response.data.pages) {
            this.pullLoad.finished = true
          }
          // 翻页+1
          if (this.listQuery.currentPage !== response.data.pages && response.data.pages > 0) {
            this.listQuery.currentPage++
          }
          if (response.data.records.length === 0) {
            this.dataNone = true
          }
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .userinfo-avatar{
    width: 40px;
    height: 40px;
    border-radius: 100px;
  }
  .index-1, .index-2, .index-3{
    color: #ec6700!important;
  }
  .panel-box{
    .panel-item{
      // padding: 80px 0 80px 0px;
      padding: 10px 0 10px 0px;
      border-bottom: #dfdfdf 1px solid;
      &:last-child{
        border-bottom: none;
      }
    }
    .name{
      color: #333333;
    }
    .check{
      margin-top: -2px;
      margin-right: 3px;
    }
    .arrow-pc{
      color: #999999;
    }
    .font-gray {
      color: #999999;
    }
  }
</style>
